<template>
  <el-dialog
    v-el-drag-dialog
    title="客户信息"
    :visible.sync="visible"
    width="70%"
    min-width="1024px"
    append-to-body
    @close="reset"
  >
    <div class="item">
      <div class="content">
        <el-descriptions size="medium">
          <el-descriptions-item label="开户日期">{{ csmInfo.createTime ? parseTime(csmInfo.createTime, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
          <el-descriptions-item label="最后订气">{{ csmInfo.lastBuyDt ? parseTime(csmInfo.lastBuyDt, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
          <el-descriptions-item label="销户日期">{{ csmInfo.cancelTime ? parseTime(csmInfo.cancelTime, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">客户信息</span>
      </div>
      <el-descriptions size="medium">
        <el-descriptions-item label="客户编号">{{ csmInfo.csmCode }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ csmInfo.csmName }}</el-descriptions-item>
        <el-descriptions-item label="客户类型">{{ formatColumnMap(statusMap.customerType,'value',csmInfo.csmType,'desc' ) }}</el-descriptions-item>
        <el-descriptions-item label="身份证姓名">{{ csmInfo.sfzName }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ csmInfo.sfzh }}</el-descriptions-item>
        <el-descriptions-item label="身份证地址">{{ csmInfo.sfzAddress }}</el-descriptions-item>
        <el-descriptions-item label="客户等级">{{ formatColumnMap(statusMap.customerQuality,'value',csmInfo.unCheckQuality,'desc' ) }}</el-descriptions-item>
        <el-descriptions-item label="客户来源">{{ formatColumnMap(statusMap.customerFromPlat,'value',csmInfo.newFrom,'desc' ) }}</el-descriptions-item>
        <el-descriptions-item label="销售员">{{ csmInfo.salesmanName }}</el-descriptions-item>
        <el-descriptions-item label="开户类型">{{ formatColumnMap(statusMap.newType,'value',csmInfo.newType,'desc' ) }}</el-descriptions-item>
        <el-descriptions-item label="是否自提">{{ csmInfo.isPickUp?'是':'否' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">账户信息</span>
      </div>
      <el-descriptions size="medium">
        <el-descriptions-item label="合同号">{{ csmInfo.contractNumber }}</el-descriptions-item>
        <el-descriptions-item label="结款方式">{{ formatColumnMap(statusMap.settlementType,'value',csmInfo.settlementType ,'desc' ) }}</el-descriptions-item>
        <el-descriptions-item label="占用瓶数">{{ csmInfo.curGasCount }}</el-descriptions-item>
        <el-descriptions-item label="客户押金">{{ csmInfo.deposit }}</el-descriptions-item>
        <el-descriptions-item label="结款天数">{{ csmInfo.intSpare2 }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="1">{{ csmInfo.remark }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="item">
      <el-tabs v-model="activeName" style="min-height: 200px;" type="card" @tab-click="tabsClick">
        <el-tab-pane lazy label="电话和地址" name="user">
          <tab-user :csm-info="csmInfo" />
        </el-tab-pane>
        <el-tab-pane lazy label="租瓶信息" name="bottle">
          <tab-bottle ref="bottle" :csm-id="csmInfo.csmId" />
        </el-tab-pane>
        <el-tab-pane lazy label="保险信息" name="insurance">
          <tab-insurance ref="insurance" :csm-id="csmInfo.csmId" />
        </el-tab-pane>
        <el-tab-pane lazy label="证件信息" name="certificate">
          <tab-certificate ref="certificate" :csm-id="csmInfo.csmId" />
        </el-tab-pane>
        <el-tab-pane lazy label="历史记录" name="history">
          <tab-history ref="history" :csm-id="csmInfo.csmId" />
        </el-tab-pane>
        <el-tab-pane lazy label="充值记录" name="recharge">
          <tab-recharge ref="recharge" :csm-info="csmInfo" />
        </el-tab-pane>
        <el-tab-pane lazy label="积分记录" name="score">
          <tab-score ref="score" :csm-id="csmInfo.csmId" />
        </el-tab-pane>
        <el-tab-pane lazy label="变更历史" name="change">
          <tab-change ref="change" :csm-id="csmInfo.csmId" />
        </el-tab-pane>
        <el-tab-pane lazy label="特价记录" name="price">
          <tab-special ref="price" :csm-id="csmInfo.csmId" />
        </el-tab-pane>
        <el-tab-pane lazy label="附件" name="file">
          <tab-accessory ref="file" :card-type="statusMap.cardType" :csm-code="csmInfo.csmCode" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
  import { queryCsmIdInfo, queryAddCsmDefaultData } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'
  import TabUser from './TabUser'
  import TabBottle from './TabBottle'
  import TabInsurance from './TabInsurance'
  import TabCertificate from './TabCertificate'
  import TabHistory from './TabHistory'
  import TabScore from './TabScore'
  import TabChange from './TabChange'
  import TabRecharge from './TabRecharge'
  import TabSpecial from './TabSpecial'
  import TabAccessory from './TabAccessory'

  export default {
    name: 'csm-detail',
    components: {
      TabUser, TabBottle, TabInsurance, TabCertificate, TabHistory, TabScore, TabChange, TabRecharge, TabSpecial, TabAccessory
    },
    data() {
      return {
        parseTime,
        visible: false,
        activeName: 'user',
        csmId: '',
        csmInfo: {},
        statusMap: {} // 状态枚举
      }
    },
    created() {
      this.getStatusMap()
    },
    mounted() {
      this.$watch('activeName', (val) => {
        if (val !== 'user') {
          console.log(val)
          this.$nextTick(() => {
            this.$refs[val].getData({})
          })
        }
      })
    },
    methods: {
      formatColumnMap,
      async open(temp) {
        return new Promise(async resolve => {
          if (temp) {
            this.resolve = resolve
            const res = await queryCsmIdInfo({
              csmId: temp.csmId
            })
            //     this.csmInfo = temp
            this.csmInfo = res.data
            this.visible = true
          }
        })
      },
      async getStatusMap() {
        const res = await queryAddCsmDefaultData()
        // this.statusMap = res.data.map(l => JSON.parse(l))
        var obj = {}
        for (var value in res.data) {
          // console.log(item)
          if (this.isJsonString(res.data[value])) {
            var item = JSON.parse(res.data[value])
            obj[value] = item
          }
        }
        this.statusMap = obj
        // console.log(this.statusMap, 'data')
      },
      // 判断是否为JSON对象
      isJsonString(str) {
        try {
          if (typeof JSON.parse(str) === 'object') {
            return true
          }
        } catch (e) {
          console.log()
        }
        return false
      },
      tabsClick(val) {
        // console.log(this.activeName)
        // val.getData()

      },
      reset() {
        this.csmInfo = {}
        this.activeName = 'user'
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}
</style>
